<template>
	<view>
		<view class="custom-navbar" :style="{'height':capsuleTop}">
			<view class="custom-navbar-title">
				代金券
			</view>
		</view>
		<view class="content" :style="{'margin-top':capsuleTop}">
			<view class="content-top">
				<view class="content-top-left" :style="{'backgroundImage':`url(${poprp})`}">
					<view class="content-top-lefts">
						<view class="content-top-title">
							积分商城
						</view>
						<view class="content-top-exchange">
							<button v-if="!phone" class="content-imgto" plain="true" open-type="getPhoneNumber"
								@getphonenumber="handlePhone">去兑换</button>
							<view v-else class="">
								<text class="content-top-exchange-text" @click="btn">去兑换</text>

								<image class="content-img1" :src="icon" mode="" @click="btn"></image>
							</view>

						</view>
					</view>
					<view class="content-top-rights">
						<image class="content-img2" :src="icon1" mode=""></image>
						<image class="content-img3" :src="icon2" mode=""></image>
					</view>
				</view>
				<view class="content-top-right" :style="{'backgroundImage':`url(${poprp1})`}">
					<view class="contents-top-right">
						<image class="contents-top-right-img1" :src="icon3" alt=""></image>
						<view class="contents-top-right-title">
							积分余额:{{!integral ? 0 : integral}}
						</view>
					</view>
					<view class="contents-top-right">
						<img class="contents-top-right-img1" :src="icon4" alt="">
						<view class="contents-top-right-title">
							券余额:{{!voucher ? 0 : voucher}}
						</view>
					</view>

					<button v-if="!phone" class="contents-top-right-button" open-type="getPhoneNumber"
						@getphonenumber="handlePhone">一键转积分</button>
					<view v-else class="contents-top-right-button" @click="openShow">
						一键转积分
					</view>
				</view>
			</view>
			<view class="aside">
				<view class="">
					代金券列表 <view class="contents-top-right-buttons" @click="updateFn">
						刷新券列表
					</view>
				</view>
				<!-- <view class="aside-top">
					<view class="aside-top-left">
						<text class="aside-top-text">最近获得</text>
						<image class="aside-top-img" :src="icon5" alt=""></image>
					</view>
					<view class="aside-top-left">
						<text class="aside-top-text">商家分类</text>
						<image class="aside-top-img" :src="icon5" alt=""></image>
					</view>
					<view class="aside-top-left">
						<text class="aside-top-text">排序</text>
						<image class="aside-top-img" :src="icon5" alt=""></image>
					</view>
				</view> -->
				<view class="line">

				</view>
				<view class="list" v-for="(item,index) in cardlist" :key="index">
					<view class="aside-list">
						<view class="aside-left" :style="{'backgroundImage':`url(${poprp2})`}">
							<image class="aside-left-img" :src="icon6" alt=""></image>
						</view>
						<view class="aside-right">
							<view class="aside-right-one">
								{{item.title}}
							</view>
							<view class="aside-right-two">
								{{item.froms}}
							</view>
							<view class="aside-right-three" v-if="item.timeend">
								<image class="aside-top-imgs" :src="icon7" alt=""></image>
								<text class="aside-right-texts">有效期至{{item.timeend}} </text>
								<!-- <text class="aside-right-text">还剩{{item.days}}天</text> -->
							</view>
							<view class="">
								<view v-if="item.state == 1" class="aside-right-four"
									:style="{'backgroundImage':`url(${poprp3})`}">

								</view>

								<view v-else-if="item.state == 2" class="aside-right-one">
									已用
								</view>
								<view v-else-if="item.state == 3" class="aside-right-one">
									过期
								</view>
								<view v-else-if="item.state == 4" class="aside-right-one">
									异常
								</view>
								<view v-else-if="item.state == 0" class="aside-right-one">
									申请中
								</view>
							</view>

						</view>

					</view>
					<view class="aside-line">

					</view>
					<view class="aside-footer">
						<image class="aside-footer-img" :src="icon8" alt=""></image>
						<text class="aside-footer-text">兑换等值礼品</text>
						<view v-if="item.state == 1" class="aside-footer-btn" @click="btnz(item)">
							赠送好友
						</view>
						<!-- <button v-if="item.state == 1" class="aside-footer-btn" :hover-stop-propagation="true" data-name="shareBtn" open-type="share" className="share" @click="btnz(item)">赠送好友</button> -->
						<!-- <view class="aside-footer-btn">
							兑换积分
						</view> -->
					</view>
					<image class="asides-img" :src="icon9" alt=""></image>
				</view>
				<u-modal v-model="show" @confirm="confirm" ref="uModal" title="温馨提示" :content="content"
					:show-cancel-button="true" :async-close="true"></u-modal>
				<u-modal v-model="btnzshow" :show-confirm-button="false">
					<view class="text-btn">
						是否确认赠送?
					</view>
					<view class="ze-tibtn">
						<button class="ze-tibtn-l" @click="btnzshow = false">取消</button>
						<button class="ze-tibtn-r" :hover-stop-propagation="true" data-name="shareBtn" open-type="share"
							className="share" @click="btnzshow = false">赠送好友</button>
					</view>
				</u-modal>
			</view>
		</view>
		<comments :shows="shows" @close1="close1" @successMember="successMember"></comments>
		<u-mask :show="showTitle" z-index="2000">
			<view class="popup-container">
				<view class="popup-bg" :style="{'backgroundImage':`url(${popup})`}" @click="popupClcik">
					<view class="popup-title">
						您的体验额度已满!
					</view>
					<view class="popup-aside">
						请升级成为会员后享受一年无限次礼品兑换！
					</view>
					<view class="popup-btn">
						升级会员
					</view>
				</view>
				<image class="popup-close" @click="handleCloseClick" mode="widthFix" :src="popupClose"></image>
			</view>
		</u-mask>
	</view>
</template>

<script>
	import {
		log
	} from 'util';
	import {
		comments
	} from '../comments/comments.vue'
	export default {
		components: {
			comments
		},
		data() {
			return {
				btnzshow: false,
				capsuleTop: uni.getMenuButtonBoundingClientRect().top + 35.5 + 'px',
				popupShow: false,
				poprp: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money12.png',
				poprp1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money13.png',
				poprp2: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money16.png',
				poprp3: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money11.png',
				icon: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money7.png',
				icon1: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money4.png',
				icon2: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money3.png',
				icon3: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money2.png',
				icon4: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money1.png',
				icon5: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money5.png',
				icon6: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money9.png',
				icon7: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money8.png',
				icon8: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money15.png',
				icon9: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/money14.png',
				shares: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/share.png',
				clsoeImg: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/close.png',
				popup: 'https://www.tunquanquan.Com/CloudPhoneMain/v1/applet/loadImg?path=static/money/popup-bg.png',
				popupClose: '../../static/tab/popup-close.png',
				voucher: '', //券总额
				integral: '', //积分总额
				cardlist: [],
				content: '是否确认转换？',
				contents: '是否确认赠送？',
				show: false,
				appId: '',
				zpath: '',
				value: '',
				title: '',
				phone: '',
				showTitle: false,
				shows: false,

			}
		},

		onShow() {
			this.getIndex();
		},
		onShareAppMessage() { // 分享到微信好友
			// 更多参数配置，参考文档
			return {
				title: this.title,
				appId: '',
				imageUrl: this.shares,
				path: this.zpath
			}

		},
		watch: {

		},
		methods: {
			//关闭弹窗
			handleCloseClick() {
				this.showTitle = false;
				uni.showTabBar();
			},
			close1() {
				this.shows = false;
			},
			successMember() {
				new this.$Toast('购买会员成功！').showtoast();
				this.shows = false;
				this.getIndex();
			},
			//充值会员
			popupClcik() {
				this.showTitle = false;
				uni.showTabBar();
				this.shows = true;
			},
			updateFn() {
				this.getIndex(1);
			},
			btnz(item) {
				this.getvs(item.id);
				this.title = '送给你' + item.title + '，快来领取！'
				console.log(item);
			},
			async handlePhone(e) {

				let params = {
					code: e.detail.code
				};
				try {
					let data = await new this.Request(this.Urls.m().getphone, params).modepost();
					uni.setStorageSync('phone', data.data.phone);
					this.phone = data.data.phone;
					new this.$Toast('获取成功').showtoast();
				} catch (e) {
					console.log(e, 'e')
					new this.$Toast('获取失败').showtoast();
				}

			},
			//一键转积分
			openShow() {
				this.show = true;
			},
			confirm() {
				this.Integral();
			},
			async getvs(id) {
				let query = {
					voucherid: id
				}
				try {
					let data = await new this.Request(this.Urls.m().vs, query).modepost();
					if (data.code == 0) {
						console.log(data.data.value)
						this.zpath = '/pages/index/index?value=' + data.data.value;
						this.btnzshow = true;
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							mask: true,
						});
					}

				} catch (e) {
					console.log(e, 'e')

				}

			},
			async Integral() {
				try {
					let data = await new this.Request(this.Urls.m().Integral).modepost();
					if (data.code == 0) {
						setTimeout(() => {
							uni.showToast({
								title: "转换成功！",
								icon: 'none',
								mask: true,
							});
						})

						this.show = false;
						this.getIndex();

					} else if (data.code == 1) {
						this.showTitle = true;
						uni.hideTabBar();
						this.show = false;
					} else {
						uni.showToast({
							title: data.msg,
							icon: 'none',
							mask: true,
						});
						this.show = false;
					}
				} catch (e) {
					console.log(e, 'e')

				}

			},
			async getIndex(type) {

				try {
					let data = await new this.Request(this.Urls.m().voucher).modepost();
					console.log(data, 'data');
					this.integral = data.data.integral;
					this.voucher = data.data.voucher;
					this.cardlist = data.data.card;
					this.appId = data.data.appid;
					this.path = data.data.path;
					this.phone = data.data.user.phone;
					if (type && type == 1) {
						uni.showToast({
							title: "刷新成功！",
							icon: 'none',
							mask: true,
						});
					}
				} catch (e) {
					console.log(e, 'e')

				}

			},
			btn() {
				console.log(11)
				uni.navigateToMiniProgram({
					appId: this.appId,
					path: this.path,
					extraData: {
						'data1': 'test'
					},
					success(res) {
						// 打开成功
					}
				})
				// uni.showToast({
				// 	title: "正在开发中，敬请期待！",
				// 	icon: 'none',
				// 	mask: true,
				// });
			}
		}

	}
</script>

<style lang="scss" scoped>
	.custom-navbar {
		// display: flex;
		// justify-content: center;
		// align-items: center;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 999;
		text-align: center;
		font-size: 44rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 500;
		color: #333333;
		/* 导航栏高度 */
		background-image: linear-gradient(to right, #caecf8 0%, #fff 100%);
		/* 渐变色 */
		/* 其他样式 */
	}

	.custom-navbar-title {
		width: 100%;
		position: absolute;
		bottom: 10rpx;
		text-align: center;
	}

	.popup-container {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
	}

	.custom-top {
		width: 100%;
	}

	.top-height {
		background: linear-gradient(to right, #51D3F4, #fff);
	}

	.popup-close {
		display: block;
		margin: 114rpx auto 0;
		width: 66rpx;
		height: 66rpx;
		/* opacity: 0.7; */
	}

	.popup-title {
		margin: 162rpx auto 0;
		font-family: PingFang SC;
		font-weight: bold;
		text-align: center;
		font-size: 46rpx;
		color: #000000;
	}

	.popup-aside {
		width: 80%;
		margin: 84rpx auto 0;
		font-family: PingFang SC;
		font-weight: 500;
		font-size: 38rpx;
		color: #000000;
	}

	.popup-btn {
		margin: 110rpx auto 0;
		width: 444rpx;
		height: 120rpx;
		background: #34C0E3;
		border-radius: 60rpx;
		text-align: center;
		line-height: 120rpx;
		font-family: PingFang SC;
		font-weight: bold;
		font-size: 42rpx;
		color: #FFFFFF;
	}

	.content {
		overflow: hidden;
	}

	.content-top {
		margin-top: 30rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.content-top-left {
		width: 333rpx;
		height: 246rpx;
		background: no-repeat;
		background-size: 100% 100%;
	}

	.content-top-right {
		width: 333rpx;
		height: 246rpx;
		background: no-repeat;
		background-size: 100% 100%;
	}

	.content-top-lefts {
		display: flex;
		width: 333rpx;
	}

	.content-top-title {
		margin: 28rpx 33rpx 0 27rpx;
		font-size: 30rpx;
		font-family: YouSheBiaoTiHei;
		font-weight: 500;
		color: #333333;
	}

	.content-top-exchange {
		margin: 28rpx 33rpx 0 0;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #FF5C5C;
	}

	.content-top-exchange-text {
		vertical-align: middle;

	}

	.content-imgto {
		vertical-align: middle;
		font-size: 24rpx;
		color: #FF5C5C;
		background-color: transparent;
		border: 0;
	}

	.content-img1 {
		margin-left: 10rpx;
		width: 12rpx;
		height: 20rpx;
		vertical-align: middle;
	}

	.content-top-rights {
		overflow: hidden;
		margin-top: 46rpx;
		display: flex;
		justify-content: space-around;
		flex-wrap: wrap;
	}

	.content-img2 {
		width: 92rpx;
		height: 101rpx;
	}

	.content-img3 {
		width: 114rpx;
		height: 101rpx;
	}

	.contents-top-right {
		margin-top: 24rpx;
		padding-left: 33rpx;
	}

	.contents-top-right-img1 {
		width: 38rpx;
		height: 38rpx;
		vertical-align: middle;
	}

	.contents-top-right-title {
		margin-left: 10rpx;
		display: inline-block;
		font-size: 32rpx;
		font-family: DIN;
		font-weight: bold;
		color: #333333;
		vertical-align: middle;
	}

	.contents-top-right-button {
		margin: 30rpx auto 0;
		width: 200rpx;
		height: 60rpx;
		background: #34C8E8;
		border-radius: 30rpx;
		font-size: 26rpx;
		line-height: 60rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.contents-top-right-buttons {
		display: inline-block;
		margin-left: 30rpx;
		width: 200rpx;
		height: 60rpx;
		background: #34C8E8;
		border-radius: 30rpx;
		font-size: 26rpx;
		line-height: 60rpx;
		text-align: center;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFFFFF;
	}

	.aside {

		margin-top: 30rpx;
		padding: 30rpx 27rpx 0;
		overflow-y: auto;
		width: 750rpx;
		height: 1088rpx;
		background: #FFFFFF;
	}

	.aside-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.aside-top-text {
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		vertical-align: middle;
	}

	.aside-top-img {
		margin-left: 12rpx;
		width: 16rpx;
		height: 13rpx;
		vertical-align: middle;
	}

	.line {
		margin-top: 26rpx;
		width: 100%;
		height: 2rpx;
		border: .5px solid #333333;
		opacity: 0.08;
	}

	.list {
		position: relative;
		margin: 27rpx auto 0;
		padding: 26rpx 20rpx;
		width: 694rpx;
		background: #FFFFFF;
		border: 1px solid rgba(0, 0, 0, 0.1);
		box-shadow: 0rpx 9rpx 14rpx 0rpx rgba(134, 134, 134, 0.25);
		border-radius: 20rpx;
		box-sizing: border-box;
	}

	.aside-list {

		display: flex;


	}

	.aside-left {
		width: 170rpx;
		height: 170rpx;
		background: no-repeat;
		background-size: 100% 100%;
	}

	.popup-bg {
		overflow: hidden;
		box-sizing: border-box;
		width: 600rpx;
		height: 720rpx;
		background: no-repeat;
		background-size: 100% 100%;
	}

	.aside-left-img {
		width: 170rpx;
		height: 170rpx;
	}

	.aside-right {
		margin-left: 22rpx;
		flex: 1;
	}

	.aside-right-one {
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
	}

	.aside-right-two {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		line-height: 40rpx;
	}

	.aside-right-three {
		margin-top: 10rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
	}

	.aside-top-imgs {
		width: 25rpx;
		height: 26rpx;
		vertical-align: middle;
	}

	.aside-right-text {
		margin-left: 58rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #FFAE11;
		vertical-align: middle;
	}

	.aside-right-texts {
		vertical-align: middle;
	}

	.aside-right-four {
		margin-top: 5rpx;
		width: 89rpx;
		height: 42rpx;
		background: no-repeat;
		background-size: 100% 100%;
	}

	.aside-line {
		margin: 30rpx auto 0;
		width: 638rpx;
		height: 2rpx;
		border: .5px solid #000000;
		opacity: 0.08;
	}

	.aside-footer {
		margin-top: 10rpx;
	}

	.aside-footer-img {
		width: 116rpx;
		height: 46rpx;
		vertical-align: middle;
	}

	.aside-footer-text {
		font-size: 22rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #000000;
		vertical-align: middle;
		margin-left: 10rpx;
	}

	.aside-footer-btn {
		float: right;
		display: inline-block;
		width: 116rpx;
		border: 2px solid #000000;
		border-radius: 6rpx;
		font-size: 24rpx;
		font-family: PingFang SC;
		font-weight: 800;
		color: #333333;
		text-align: center;
		line-height: 46rpx;
		vertical-align: middle;
	}

	.asides-img {
		position: absolute;
		top: 0;
		right: 0;
		width: 117rpx;
		height: 51rpx;
	}

	.text-btn {
		margin: 60rpx 0;
		text-align: center;
	}

	.ze-tibtn {
		margin-bottom: 30rpx;
	}

	.ze-tibtn-l {
		margin: 0 8%;
		display: inline-block;
		width: 34%;
		background-color: #caecf8;
		border-radius: 100rpx;
		color: #000000;
		font-size: 26rpx;
	}

	.ze-tibtn-r {
		margin: 0 8%;
		border-radius: 100rpx;
		display: inline-block;
		font-size: 26rpx;
		width: 34%;
		background-color: #FFAE11;
		color: #000;
	}
</style>